<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css"/>
    <link rel="stylesheet" type="text/css" href="css/picture.css"/>
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/jquery.mobile-1.4.5.js"></script>
    <script>

        var smallImg=["img/thumb/1.jpg","img/thumb/2.jpg","img/thumb/3.jpg","img/thumb/4.jpg","img/thumb/5.jpg","img/thumb/6.jpg","img/thumb/7.jpg","img/thumb/8.jpg","img/thumb/9.jpg","img/thumb/10.jpg","img/thumb/11.jpg","img/thumb/12.jpg","img/thumb/13.jpg","img/thumb/14.jpg","img/thumb/15.jpg","img/thumb/16.jpg","img/thumb/17.jpg","img/thumb/18.jpg","img/thumb/19.jpg","img/thumb/20.jpg","img/thumb/21.jpg","img/thumb/22.jpg","img/thumb/23.jpg","img/thumb/24.jpg","img/thumb/25.jpg","img/thumb/26.jpg","img/thumb/27.jpg","img/thumb/28.jpg","img/thumb/29.jpg","img/thumb/30.jpg"];
        var img=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg","img/9.jpg","img/10.jpg","img/11.jpg","img/12.jpg","img/13.jpg","img/14.jpg","img/15.jpg","img/16.jpg","img/17.jpg","img/18.jpg","img/19.jpg","img/20.jpg","img/21.jpg","img/22.jpg","img/23.jpg","img/24.jpg","img/25.jpg","img/26.jpg","img/27.jpg","img/28.jpg","img/29.jpg","img/30.jpg"];

        $(function(){

            for(var i=0;i<img.length;i++){
                $("#photoWall").append("<img src='"+smallImg[i]+"'/>").trigger( "create" );
                if($("img")[i].width<135){
                    $($("img")[i]).addClass("img_style_2");
                }
            }

        })
        $(window).load(function(){

            var photo={};
            (function(app){
                app.currImg=-1;
                app.minHeight=[0];
                app.init=function(){
                    var pic=$("img");
                    for(var i=0;i<pic.length;i++){
//                        if(pic[i].width<135){
//                            $(pic[i]).addClass("img_style_2");
                            $(pic[i]).data("positionId",i);
//                        }
                    }
                }

                app.getMinHeightIdx=function(){
                    var index=0;
                    var temp=app.minHeight[0];
                    for(var i=1;i<app.minHeight.length;i++){
                        if(app.minHeight[i]<temp){
                            index=i;
                            temp=app.minHeight[i];
                        }
                    }
                    return index;
                }
                app.setLayout=function(){
//                    var content=$("div").data("role","content");
//                    console.log(content);
                    var pic=$("img");
                    var unitWidth=pic[0].offsetWidth;
                    var colsNum=Math.floor(document.documentElement.clientWidth/unitWidth);
                    var remainder=document.documentElement.clientWidth%unitWidth;
                    $("#photoWall").css("margin-left",remainder/2-5);

                    for(var i=0;i<pic.length;i++){
                        if(i<colsNum){
                            app.minHeight[i]=pic[i].offsetHeight;
                            $(pic[i]).css({"left":unitWidth*i-10,"top":0});
                            continue;
                        }
                        var minHeightIdx=app.getMinHeightIdx();
                        $(pic[i]).css({"left":unitWidth*minHeightIdx-10,"top":app.minHeight[minHeightIdx]});
                        app.minHeight[minHeightIdx]+=pic[i].offsetHeight;

                    }
                }
                app.addImgToPic=function(index){
                    var pic=$("#pic");
                    pic.empty();
                    var imgList=$("img");
                    for(var i=0;i<imgList.length;i++){
                        var temp=imgList[i];
                        if(index==$(temp).data("positionId")){
                            if(temp.height>200){
                                pic.append("<img id='bigImg' class='pic_style_2' src='img/"+temp.src.substring(45)+"'/>");
                            }else{
                                pic.append("<img id='bigImg' class='pic_style_1' src='img/"+temp.src.substring(45)+"'/>");
                            }
                            break;
                        };
                    }

                    $("#selectedPic").css("display","block");
                    pic.css("display","block");
                }
                app.registerClickEvent=function(){
                    $("img").click(function(e){
//                        e.preventDefault();
                        var index=$("img").index(this);
                        app.currImg=$($("img")[index]).data("positionId");
                        app.addImgToPic(app.currImg);
                    });

                  /*  $("#selectedPic").click(function(){
                        $("#selectedPic").css("display","none");
                        $("#pic").css("display","none");
                    });*/

                    $("#last").click(function(){
                        if(app.currImg!=0){
                            app.addImgToPic(--app.currImg);
                        }
                    });

                    $("#next").click(function(){
                        if(app.currImg!=img.length-1){
                            app.addImgToPic(++app.currImg);
                        }
                    });
                    $("#cancel").click(function(){
                        $("#selectedPic").css("display","none");
                        $("#pic").css("display","none");
                    });

//                    $("#bigImg").bind("swipeleft",function(){
//                        if(!(app.currImg==1)){
//                            app.addImgToPic(app.currImg-1);
//                        }
//                    });
//                    $("#bigImg").bind("swiperight",function(){
//                        if(!(app.currImg==img.length)){
//                            app.addImgToPic(app.currImg+1);
//                        }
//                    app});
                }
                app.init();
                app.setLayout();
                app.registerClickEvent();

            })(photo);

        });

    </script>
</head>
<body>
    <div data-role="page">
        <div data-role="header" data-position="fixed" data-tap-toggle="false">
            <h1>大学生活</h1>
        </div>
        <div data-role="content" id="content">
            <div id="photoWall"></div>
            <div id="selectedPic">
                <div id="cancel">乂</div>
                <div id="last">上一张</div>
                <div id="next">下一张</div>
            </div>
            <div id="pic"></div>
        </div>
        <div data-role="footer" data-position="fixed" data-tap-toggle="false">
            <h1>我的相册</h1>
        </div>
    </div>
</body>
</html>